export default{
    name:'badge',
    updated(el,binding,vnode){
        let value = binding.value;
        
        let max = 99;
        let content = '';

        if (value===undefined) return ;
        if (value===false) return '';
        
        if (typeof(value)=='number'){
            if (value === 0 ){
                return ;
            }else{
                content = value > max ? max +'+':value+'';  
            }
        }
        
        if (typeof(value)=='string'){
            if (value==''){
                return ;
            }else{
                content = value;
            }
        }

        let props = vnode.props??{};
        let align = 'right';
        let type  = 'danger';

        if (props['badge-text']) content = props['badge-text'];
        if (props['badge-align']) align = props['badge-align'];
        if (props['badge-type']) type = props['badge-type'];

        //'bi-badge'
        let dotClassList = [];

        if (content=='') dotClassList.push('bi-badge-dot');
        else dotClassList.push('bi-badge-text');

        dotClassList.push('bi-badge-'+align);
        dotClassList.push('text-bg-'+type);

        var dom = document.createElement('div');
        dotClassList.forEach(item=>{dom.classList.add(item)});
        dom.innerText = content;
        
        let style = window.getComputedStyle(el,null);
        dom.style.top =  style.getPropertyValue('padding-top');

        if (align=='left'){
            dom.style.left = style.getPropertyValue('padding-left');
         }else{
            dom.style.right = style.getPropertyValue('padding-right');
        }
 
        el.classList.add('bi-badge');
        el.appendChild(dom);

    }
}